<template>
  <div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column width="160px" prop="order_sn" label="订单号"></el-table-column>
        <el-table-column width="100px" prop="user_nickname" label="用户"></el-table-column>
        <el-table-column width="100px" prop="package_name" label="订单内容"></el-table-column>
        <el-table-column width="100px" prop="course_class_hour" label="课时"></el-table-column>
        <el-table-column width="100px" prop="course_class_name" label="班级"></el-table-column>
        <el-table-column width="100px" prop="course_level" label="水平"></el-table-column>
        <el-table-column width="100px" prop="course_type" label="类型"></el-table-column>
        <el-table-column width="100px" prop="order_amount" label="价格"></el-table-column>
        <el-table-column width="100px" label="状态">
          <template slot-scope="scope">
            <span :class="isActive(scope)">{{scope.row.order_status}}</span>
          </template>
        </el-table-column>
        <el-table-column width="160px" prop="created_at" label="下单时间"></el-table-column>
        <el-table-column class="option" label="操作">
          <template slot-scope="scope">
            <el-button class="button" @click="viewDetail(scope)">查看详情</el-button>
            <el-button class="button" v-if="scope.row.order_status == '待支付' ? false : true" @click="handleClick(scope)">{{operation(scope)}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      class="pagination"
      :total="total"
      :pageSize="pageSize"
      :currentPage="currentPage"
      @currentChange="currentChange"
    ></Pagination>
  </div>
</template>
<script>
import Pagination from "@/common/pagination/pagination";
import {deleteOrder} from '@/api/operation'
import {Message} from 'element-ui'
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 15
    },
    currentPage: {
      type: Number,
      default: 1
    },
    page: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    handleClick(scope) {
      if (scope.row.order_status == '已取消') {
        this._deleteOrder(scope.row.order_id)
      }
    },
    operation(scope) {
      if (scope.row.order_status == '待发货') {
        return '发货'
      } else if (scope.row.order_status == '已完成') {
        return '确认'
      } else if (scope.row.order_status == '待收货') {
        return ''
      } else {
        return '删除'
      }
    },
    isActive(scope) {
      if (scope.row.order_status == "待支付") {
        return "active";
      }
    },
    currentChange(val) {
      // this.page = val
      // this.currentPage = 1
      // this._getOrderList(this.page)
      this.$emit("currentChange", val);
    },
    viewDetail(scope) {
      localStorage.setItem('ORDER_ITEM', JSON.stringify(scope.row.order_id))
      this.$emit("viewDetail", scope);
    },
    _deleteOrder(order_id) {
      deleteOrder(order_id)
        .then((res) => {
          if (res.code == ERR_OK) {
            // console.log(res)
            Message({
              message: res.message,
              type: 'info'
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },
  components: {
    Pagination
  }
};
</script>
<style lang="scss" scoped>
.el-table /deep/ .has-gutter {
  th {
    text-align: center;
    line-height: 20px;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
  }
}
.el-table /deep/ .el-table_1_column_12 {
  display: flex;
  justify-content: center;
}
.el-table /deep/ .el-table__row {
  td {
    text-align: center;
  }
  .active {
    color: red;
  }
}
.button {
  width: 70px;
  height: 34px;
  line-height: 20px;
  border-radius: 6px;
  background-color: rgba(27, 166, 135, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #fff;
  padding: 0;
}
.pagination {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
</style>